<template>
  <div>
    <div class="echartsGroup">
      <!-- 返回中国地图 -->
      <div class="button" v-show="isReturnChina" @click="returnChinaFn()">返回自治区地图</div>
      <!-- echarts 图表 -->
      <div ref="china_map" style="height: 100%;width: 100%"></div>
    </div>
  </div>
</template>

<script>
import 'echarts/map/js/china.js'
require('echarts/theme/macarons.js')
export default {
  name: "demo-map",
  data() {
    return {
      provinces: { //数据
        台湾: 'taiwan',
        河北: 'hebei',
        山西: 'shanxi',
        辽宁: 'liaoning',
        吉林: 'jilin',
        黑龙江: 'heilongjiang',
        江苏: 'jiangsu',
        浙江: 'zhejiang',
        安徽: 'anhui',
        福建: 'fujian',
        江西: 'jiangxi',
        山东: 'shandong',
        河南: 'henan',
        湖北: 'hubei',
        湖南: 'hunan',
        广东: 'guangdong',
        海南: 'hainan',
        四川: 'sichuan',
        贵州: 'guizhou',
        云南: 'yunnan',
        陕西: 'shanxi1',
        甘肃: 'gansu',
        青海: 'qinghai',
        新疆: 'xinjiang',
        广西: 'guangxi',
        内蒙古: 'neimenggu',
        宁夏: 'ningxia',
        西藏: 'xizang',
        北京: 'beijing',
        天津: 'tianjin',
        上海: 'shanghai',
        重庆: 'chongqing',
        香港: 'xianggang',
        澳门: 'aomen'
      },
      isReturnChina: false, //是否显示返回中国地图
      options: null, //echarts 存数据
    }
  },
  mounted() {
    window.clickRoute = this.clickRoute;
    this.$nextTick(() => {
      this.chinaMaprsult('china')
    })
  },
  methods: {
    // 中国地图点击省份 显示当前省份的详细的地区。
    chinaMapHidden(chinaMap) {
      let that = this
      chinaMap.off('click') //这里解决多次触发点击事件 但是还会执行2次  引用echarts地图，点击各个省份时，点击一个调用两次接口，再点击一次，调用四次接口，再点击调用八次。。。。依次叠加，问题在于，没有将地图上的点击事件清空
      chinaMap.on('click', async function(params) {
        if (params.name in that.provinces) {
          let s = await import(`echarts/map/js/province/${that.provinces[params.name]}.js`);
          debugger;
          console.log(s)
          console.log(params.name)
          if (s) {
            that.chinaMaprsult(params.name)
          }
        }
      })
    },
    // 渲染地图
    chinaMaprsult(name = null) {
      // function randomData() {
      //   return Math.round(Math.random() * 500);
      // }
      var mydata = [{
        name: '北京',
        value: 1000000,
        info: {
          value1: 500000,
          value2: 499980,
          value3: 20,
        }
      }, {
        name: '天津',
        value: 780,
        info: {
          value1: 100000,
          value2: 129990,
          value3: 10,
        }
      },
        {
          name: '上海',
          value: 880000,
          info: {
            value1: 680000,
            value2: 119990,
            value3: 10,
          }
        }, {
          name: '重庆',
          value: 660000,
          info: {
            value1: 560000,
            value2: 99985,
            value3: 15,
          }
        },
        {
          name: '河北',
          value: 760000,
          info: {
            value1: 680000,
            value2: 80000,
            value3: 0,
          }
        }, {
          name: '河南',
          value: 660000,
          info: {
            value1: 420000,
            value2: 249988,
            value3: 12,
          }
        },
        {
          name: '云南',
          value: 600000,
          info: {
            value1: 380000,
            value2: 219992,
            value3: 8,
          }
        }, {
          name: '辽宁',
          value: 240000,
          info: {
            value1: 180000,
            value2: 59970,
            value3: 30,
          }
        },
        {
          name: '黑龙江',
          value: 320000,
          info: {
            value1: 180000,
            value2: 139990,
            value3: 10,
          }
        }, {
          name: '湖南',
          value: 630000,
          info: {
            value1: 330000,
            value2: 329960,
            value3: 40,
          }
        },
        {
          name: '安徽',
          value: 890000,
          info: {
            value1: 530000,
            value2: 369963,
            value3: 37,
          }
        }, {
          name: '山东',
          value: 780000,
          info: {
            value1: 430000,
            value2: 349953,
            value3: 47,
          }
        },
        {
          name: '新疆',
          value: 230000,
          info: {
            value1: 100000,
            value2: 129990,
            value3: 10,
          }
        }, {
          name: '江苏',
          value: 660000,
          info: {
            value1: 610000,
            value2: 49987,
            value3: 13,
          }
        },
        {
          name: '浙江',
          value: 720000,
          info: {
            value1: 510000,
            value2: 209982,
            value3: 12,
          }
        }, {
          name: '江西',
          value: 660000,
          info: {
            value1: 390000,
            value2: 269972,
            value3: 28,
          }
        },
        {
          name: '湖北',
          value: 890000,
          info: {
            value1: 510000,
            value2: 209982,
            value3: 12,
          }
        }, {
          name: '广西',
          value: 400000,
          info: {
            value1: 310000,
            value2: 99962,
            value3: 38,
          }
        },
        {
          name: '甘肃',
          value: 200000,
          info: {
            value1: 110000,
            value2: 89982,
            value3: 18,
          }
        }, {
          name: '山西',
          value: 320000,
          info: {
            value1: 210000,
            value2: 109882,
            value3: 112,
          }
        },
        {
          name: '内蒙古',
          value: 40000,
          info: {
            value1: 210000,
            value2: 189882,
            value3: 112,
          }
        }, {
          name: '陕西',
          value: 450000,
          info: {
            value1: 410000,
            value2: 39972,
            value3: 28,
          }
        },
        {
          name: '吉林',
          value: 550000,
          info: {
            value1: 510000,
            value2: 39988,
            value3: 12,
          }
        }, {
          name: '福建',
          value: 750000,
          info: {
            value1: 319970,
            value2: 430000,
            value3: 30,
          }
        },
        {
          name: '贵州',
          value: 450000,
          info: {
            value1: 310000,
            value2: 149882,
            value3: 112,
          }
        }, {
          name: '广东',
          value: 760000,
          info: {
            value1: 530000,
            value2: 229862,
            value3: 138,
          }
        },
        {
          name: '青海',
          value: 150000,
          info: {
            value1: 110000,
            value2: 39842,
            value3: 158,
          }
        }, {
          name: '西藏',
          value: 50000,
          info: {
            value1: 44000,
            value2: 59872,
            value3: 138,
          }
        },
        {
          name: '四川',
          value: 530000,
          info: {
            value1: 510000,
            value2: 19882,
            value3: 12,
          }
        }, {
          name: '宁夏',
          value: 250000,
          info: {
            value1: 210000,
            value2: 39871,
            value3: 129,
          }
        },
        {
          name: '海南',
          value: 350000,
          info: {
            value1: 310000,
            value2: 39982,
            value3: 18,
          }
        }, {
          name: '台湾',
          value: 150000,
          info: {
            value1: 110000,
            value2: 39932,
            value3: 78,
          }
        },
        {
          name: '香港',
          value: 300000,
          info: {
            value1: 310000,
            value2: 89922,
            value3: 78,
          }
        }, {
          name: '澳门',
          value: 250000,
          info: {
            value1: 145000,
            value2: 104955,
            value3: 45,
          }
        }
      ];

      // let _this = this;
      name == 'china' ? this.isReturnChina = false : this.isReturnChina = true;
      let chinaMap = this.$echarts.init(this.$refs.china_map)
      this.options = {
        title: [{
          text: "充电桩数据分布",
          //subtext: '   ',
          left: '36%',
          top: '5%',
          textStyle: {
            color: '#fff',
            fontSize: 25
          }
        }, ],
        tooltip: { // 鼠标移到图里面的浮动提示框
          trigger: 'item', //数据项图形触发
          // triggerOn: 'click', //这里根据业务需要给点击事件做跳转,所以不能做悬浮了,如果做悬浮 点击不了文字跳转
          formatter: function(params) {
            console.log(params)
            var info = params.data && params.data.info ? params.data.info : null
            var name = params.name
            var toolipData = {}
            var htmlStr = ''
            // _this.provinceData.forEach(item => {
            // 	if (name == item.name) {
            // 		toolipData = item.info
            // 	}
            // })
            if (toolipData != null){ //随机生成的后期根据接口显示
              var val1=Math.round(Math.random() * 100000);
              var val2=Math.round(Math.random() * 100000);
              var val3=Math.round(Math.random() * 100);
              var val=val1+val2+val3;
              htmlStr = `<div class="list-wrap">
											<div class="list-title">${name}</div>
											<div>终端总数量：${val}</div>
											<div>充电中的终端数量：${val1}</div>
											<div>未充电中的终端数量：${val2}</div>
											<div>故障的终端数量：${val3}</div>
										</div>`;
            }

            if (params.data && info) {
              htmlStr = `<div class="list-wrap">
											<div class="list-title">${name}</div>
											<div>终端总数：${params.data.value}</div>
											<div>充电中的终端数量：${info.value1}</div>
											<div>未充电中的终端数量：${info.value2}</div>
											<div>故障的终端数量：${info.value3}</div>
										</div>`
            }


            return htmlStr
          },
        },
        visualMap: { // 左下角展示
          show: name === 'china' ? true : false,
          min: 0,
          max: 1000000,
          left: 100,
          bottom: 0,
          showLabel: true,
          textStyle: {
            color: '#fff'
          },
          text: ['充电桩数量'],
          pieces: [ //左下角的切换数据显示
            {
              gt: 750000,
              lte: 1000000,
              label: '75~100',
              color: '#012fee',
            }, {
              gt: 500000,
              lte: 750000,
              label: '50~75',
              color: '#007aff',
            }, {
              gt: 250000,
              lte: 500000,
              label: '25_50',
              color: '#00aef5',
            }, {
              gte: 0,
              lte: 250000,
              label: '0~25',
              color: '#33ceff'
            }
          ]
        },
        // dataRange: {
        //
        // },
        geo: {
          map: name ? name : "china", // 核心
          roam: false,
          label: { // 页面初始化加载的文字
            normal: {
              show: true,
              textStyle: {
                color: "#fff", // 页面初始化的地图文字颜色
                fontSize: 10 // // 页面初始化的地图文字大小
              },
            },
          },
          itemStyle: { //设置样式
            normal: {
              borderWidth: 1, //区域边框宽度
              borderColor: 'rgba(0, 146, 255, 1.0)',
              shadowColor: '#104b7d',
              shadowBlur: 20,
              areaColor: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(0, 112, 255, 1.0)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#0040cf' // 100% 处的颜色
                }],
              },
            },
            emphasis: { // 移入背景颜色
              areaColor: '#00eddb',
              // areaColor: '#F9D92E',
              show: true,
              textStyle: {
                color: '#000',
                fontSize: "12px"
              }
            },
          },
        },
        series: [{
          type: "map",
          geoIndex: 0,
          itemStyle: { //地图区域的多边形 图形样式
            normal: { //是图形在默认状态下的样式
              label: {
                show: true, //是否显示标签
                textStyle: {
                  color: "black"
                }
              }
            },
            zoom: 1.5, //地图缩放比例,默认为1
            emphasis: { //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
              label: {
                show: true
              }
            }
          },
          label: {
            normal: {
              show: true, //显示省份标签
              textStyle: {
                color: "#ccc"
              }, //省份标签字体颜色
            },
            emphasis: {
              show: true,
              textStyle: {}
            }
          },
          data: mydata, // 地图数据,
        },
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            rippleEffect: {
              brushType: 'fill',
              scale: 0
            },
            showEffectOn: 'render',
            label: {
              lineHeight: 30,
              normal: {
                show: true,
                color: '#081727',
                position: 'inside',
                padding: [5, 0, 0, 0],
                verticalAlign: 'middle',
                formatter: function(para) {
                  return '{cnNum|' + para.data.value[2] + '}'
                  // return para.data.value[2]
                },
                rich: {
                  cnNum: {
                    fontSize: 16,
                    color: '#081727',
                    lineHeight: 28,
                  }
                }
              },
            },
            symbol: 'roundRect',
            // symbolRotate: 20,
            symbolSize: [40, 28],
            data: [],
            zlevel: 1,
          }
        ],
      }
      chinaMap.setOption(this.options)
      this.chinaMapHidden(chinaMap)
      window.addEventListener('resize', () => {
        chinaMap.resize();
      })
      chinaMap.on('click', (params) => {
        console.log(params);
        // 触发二级界面图表
        this.$emit('changeTabChild', 2)
      });
    },
    // 返回中国地图
    returnChinaFn() {
      this.chinaMaprsult('china');
      this.$emit('changeTabChild', 1)
    },
    // 点击跳转页面
    clickRoute() {
      // this.$router.push('/')
    },
  }
}
</script>

<style scoped>
.echartsGroup {
  width: calc(100% - 746px);
  height: 900px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -400px;
  margin-left: calc((100% - 746px) / -2);
}
.echartsGroup .button {
  position: fixed;
  top: 120px;
  left: 560px;
  border: 1px solid #00ebff;
  background: #00468C;
  color: #00ebff;
  padding: 5px 20px;
  font-size: 14px;
  box-shadow: 0 0 10px #00ebff;
  cursor: pointer;
  z-index: 4;
}
  .list-ul {
    list-style: none;
  }

.list-li {
  pointer-events: all;
  cursor: pointer;
}
</style>
